<template>
	<div class="box">
		<div>
			<a-form ref="ruleForm" :model="ruleForm" label-width="100px" class="form_data">
				<a-form-item>
							<a-button  @click="addBtn" >新增box</a-button>
				</a-form-item>
			</a-form>
			<div class="box_one">
				<a-card class="box-card" v-for="(item,index) in modelName" :title="headerVal" :class="{active:selectIndex==index}"
				 @click.native.stop="elcardBtn(index)" shadow="hover" :key="index">
					<a-form ref="ruleForm" label-width="80px">
						<a-form-item label="查全率:" class="flex_row">{{index}}</a-form-item>
						<a-form-item label="查准率:" class="flex_row">{{index}}</a-form-item>
						<a-form-item label="保存人:" class="flex_row">{{index}}</a-form-item>
						<a-form-item label="调用次数:" class="flex_row">{{index}}</a-form-item>
					</a-form>
				</a-card>
			</div>


			<!-- <div class="box_foo flex_row">style
				<a-button type="primary" @click="diaoyongBtn" style="margin-right: 20px;">调用</a-button>
				<a-pagination background layout=" prev, pager, next" prev-text="上一页" next-text="下一页" @current-change="refreshPageRequest"
				 :current-page="listQuery.pageNum" :page-size="listQuery.pageSize" :total="total">
				</a-pagination>
			</div> -->
		</div>
		<div>
		</div>
	</div>
</template>

<script>
	import 'ant-design-vue/lib/card/style/index.css';
	import 'ant-design-vue/lib/button/style/index.css';
	import 'ant-design-vue/lib/form/style/index.css';
	import 'ant-design-vue/lib/form-model/style/index.css';
	import {Card,Button,Form,FormModel} from 'ant-design-vue' 
	var mixin = {
		data() {
			return {
					ruleForm: {
					},
					modelName: [
						{ id:"1"}, 
						{id: "2"},
						{id: "3"},
						],
						
					headerVal: '模型名称',
					selectIndex: 2,
			}
		},
	}
	export default {
		mixins: [mixin],
		components:{
			aCard:Card,
			aButton:Button,
			aForm:Form,
			aFormItem:Form.Item,
			aFormModel:FormModel
		},
		methods: {
			addBtn() {
				this.modelName.push({})
				console.log(this.modelName)
			},
			// 点击卡片换颜色
			elcardBtn(index) {
				this.selectIndex = index
			},
			// 调用
			diaoyongBtn() {
				var data = this.modelName[this.selectIndex]
				console.log(data)
			},
			// 分页
			refreshPageRequest(page) {
				console.log(page, 2222222222222)
				this.listQuery.pageIndex = page
				// this.fetchData()
			},

		}
	}
</script>


<style lang="less" scoped>
	.box {
		// padding: 0 5%;

		.form_data {
			margin: 0 25%;
		}

		.box_one {
			width: 100%;
			 .flex_row(row);
			flex-wrap: wrap;

			.active {
				border: #108EE9 3px solid;
			}

			.box-card {
				min-width: 300px;
				min-height: 250px;
				flex:1 0 auto;
				margin: 5px;

				/deep/.a-card__header {
					// padding: 12px 10px;
					text-align: center;
				}

				/deep/.a-form {
					/deep/.a-form-item {
						margin-bottom: 2px;
					}
				}
			}
		}

		.box_foo {
			float: right;
			margin: 20px 5%;
		}
	}

	.flex_row {
		display: flex;
		flex-flow: row;
	}
</style>
